<?php ob_start(); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <?php
        $id = $_GET['id'];
        ?>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>

        <link rel="stylesheet" type="text/css" href="css/easyui.css">
        <link rel="stylesheet" type="text/css" href="css/icon.css">
        <link rel="stylesheet" type="text/css" href="css/easyuiforms.css">
        <link href="css/style.css" rel="stylesheet" type="text/css" />

        <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="../js/ajaxfileupload.js"></script>
        
        <style type="text/css">
            table, td, td {
                border: none;
            }
        </style>
        <script>
            function getFileExtension(filename) 
            { 
                if( filename.length == 0 ) return ""; 
                var dot = filename.lastIndexOf("."); 
                if( dot == -1 ) return ""; 
                var extension = filename.substr(dot + 1,filename.length); 
                return extension; 
            }
            
            function deleteImg(id) {
                jQuery.ajax({
                    url: 'editpackageimage.php',
                    data: {
                        'mode'          : 'd',
                        'id'            : id
                    },
                    type: 'post',
                    success: function(json2) {
                        $('#row'+id).remove();
                    }
                })
            }
    
            function uploadFile(elementId, packageId)
            {
                var allowedExt = ['jpg','jpeg','gif','bmp'];
                var ext = getFileExtension($('#' + elementId).val());
                if(ext == '') {
                    alert('Please select file first');
                    return false;
                }
        
                if($.inArray(ext, allowedExt) < 0) {
                    alert('File extension is not allowed');
                    return false;
                }
        
                $("#loading")
                .ajaxStart(function(){
                    $(this).show();
                })
                .ajaxComplete(function(){
                    $(this).hide();
                });
        
                $.ajaxFileUpload ({
                    url:'upload_file.php',
                    secureuri:false,
                    fileElementId:'postedFile',
                    dataType: 'json',
                    data:{elementid:elementId, uploadfolder:'uploaded/packages/'},
                    success: function (data, status) {
                        if(typeof(data.error) != 'undefined') {
                            if(data.error != '') {
                                alert(data.error);
                            } else {
                                //success, save to database & display
                                jQuery.ajax({
                                    url: 'editpackageimage.php',
                                    data: {
                                        'mode'          : 'a',
                                        'packageid'     : packageId,
                                        'filename'      : data.msg
                                    },
                                    type: 'post',
                                    success: function(json) {
                                        var newid = json;
                                        var rowid = 'row'+newid;
                                        $('#imgtable').append("<tr id='"+rowid+"'><td width='50%'><img width='150' src='"+data.msg+"' /></td><td><a href='#' onclick=\"deleteImg('"+json+"')\">Delete</a></td></tr>");
                                    }
                                })
                            }
                        }
                    },
                    error: function (data, status, e) {
                        alert(e);
                    }
                })
                return false;
            }
    
            function loadImage() {
        
            }
        </script>
    </head>
    <body style="overflow: auto;">
        <form id="img_form" action="upload_file.php" method="post" enctype="multipart/form-data">
            <label for="file">Add new image</label>
            <input type="file" id="postedFile" name="postedFile" style="width: 250px;" />
            <input type="button" 
                   style="width: 50px;" 
                   name="upload" 
                   value="Upload" 
                   onclick="uploadFile('postedFile','<?php echo $id; ?>');" />
            <img id="loading" src="../images/loading.gif" style="display:none;" />
        </form>

        <?php
        if (strlen(session_id()) < 1)
            session_start();

        if (!isset($_SESSION['packageid']))
            $_SESSION['packageid'] = '';

        $_SESSION['packageid'] = $id;

        include 'inc/conn.php';
        $sql = "select * from ats_package_images where packageid=$id";
        $rs = mysql_query($sql)
                or die('sql error');
        ?>
        <table border="0" width="50%" id="imgtable">
            <?php
            while ($row = mysql_fetch_array($rs)) {
                //display images
                $realfilename = $row['filename'];
                if (!file_exists($realfilename))
                    $realfilename = 'images/no-photo.jpg';
                ?>

                <tr id="row<?php echo $row['id']; ?>">
                    <td width="50%">
                        <img src="<?php echo $realfilename; ?>" width="100" />
                    </td>
                    <td>
                        <a href="#" onclick="deleteImg('<?php echo $row['id']; ?>')" >Delete</a>
                    </td>
                </tr>

                <?php
            }
            ?>
        </table>

        <br />
        <center>
            <a href="#" onclick="window.close();">Close</a>
        </center>
    </body>
</html>
<?php ob_end_flush(); ?>